import * as React from 'react';
import { Form, Button, notification } from 'antd';
import FormBuilder from '@components/Form';
import { Component } from 'react';
import { inject } from 'mobx-react';
import * as styles from './index.scss'
import { withRouter } from 'react-router-dom';
interface IState {
  pending: boolean;
}
@inject('rootStore')
class Login extends Component<any, IState> {
  ref: any;
  constructor(props: any) {
    super(props);
    this.state = {
      pending: false,
    };
  }

  static handleFinish: (values: any) => void;

  handleFinish = (values: any) => {
    this.setState({
      pending: true,
    });
    // 登录

    this.props.rootStore.login(values).then((res:any)=>{
      if(res.data.status == 200){
        // 前端重定向
        location.href = '/'
      }else{
        notification.error({
          message: res.data.reason,
          description: res.data.message,
        })
      }
      this.setState({
        pending: false,
      });
    })
    /* setTimeout(() => {
      this.setState({
        pending: false,
      });
      Modal.success({
        title: 'Success',
        content: 'Infomation updated.',
      });
    }, 1500); */
  };
  render() {
    const { title } = this.props.rootStore.globalConfig
    const meta = {
      columns: 1, //显示列数
      initialValues: {
        textarea: 'textarea',
      },
      // viewMode: true, //为ture,不能编辑
      // formItemLayout: [8, 16], // Must set this for inline layout
      fields: [
        {
          // noFormItem: true,
          key: 'username', // 键
          label: '用户名',
          widget: 'input', // 自定义组件
          // initialValue: 'hello', // 默认值
          required: true, // 不能为空
          message: '用户名不能为空',
          placeholder: '请输入用户名',
          // tooltip: '提示信息', // 提示
          // formItemLayout: [30, 30], //label宽度，输入框宽度
          // validateTrigger: 'onClick',
          trigger: 'onChange',
          // forwardRef: true,
          // antd自带参数
          // help: '提示信息',
          // extra: '额外的提示信息',
          // noStyle: true,
          // validateStatus: 'warning',
          // hasFeedback: true,
          // readOnly: true,
          // viewMode: true,
          getValueProps: (value: any) => {
          },
        },
        {
          key: 'password',
          label: '密码',
          widget: 'password',
          rules: [
            {
              required: true,
              message: '请输入密码',
            },
          ],
        },
      ],
    };
    const { pending } = this.state;
    return (
      <div style={{height: '100%', overflowY: 'hidden'}}>
       <a href="/" className={styles.logo}>
          <img src="/assets/logo.png" alt="" />
        </a>
        <div className={styles.login}>
        <div className={styles.header}>{title}</div>
          <div className={styles.divider}></div>
          <Form onFinish={this.handleFinish}>
            <FormBuilder meta={meta} />
            <Form.Item wrapperCol={{ span: 10, offset: 10 }}>
              <Button shape="round" type="primary" htmlType="submit" loading={pending} disabled={pending}>
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>

      </div>
      
    );
  }
}

export default withRouter(Login)
